<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				background-color: #EEEEEE;
			}
			.contenter{
				width: 100%;
				height: auto;
			}
			.bg{
				width: 1190px;
				position: relative;
				margin: 0 auto;
			}
			
			.item{
				margin-top: 50px;
				overflow: hidden;
				text-align: center;
				color: #666666;
				background-color: #FFFFFF;
				/*border: 1px solid #CCC;*/
				width: 300px;
				transition: 0.5s;
				height: 340px;
				position: absolute;
				top: 0;
			}
			.item1{
				left: 20px;
			}
			
			.item2{
				left: 420px;
			}
			
			.item3{
				left: 820px;
			}
			
			.item img{
				height: 300px;
				width: 200px;
			}
			.item span{
				margin: 5px 0;
				display: inline-block;
				width: 300px;
				overflow: hidden;
			}
			
			.item1:hover{
				height: 500px;
				width: 330px;
				top: -20px;
				left: 5px;
				box-shadow: 0 0 10px #ccc;
			}

			.item2:hover{
				height: 500px;
				width: 330px;
				top: -20px;
				left: 405px;
				box-shadow: 0 0 10px #ccc;
			}
			.item3:hover{
				height: 500px;
				width: 330px;
				top: -20px;
				left: 805px;
				box-shadow: 0 0 10px #ccc;
			}
			/*.bg:hover div{
				opacity: .2;
			}*/
			/*.item:hover~.item{
				opacity: .2;
			}*/
		</style>
	</head>
	<body>
		<div class="contenter">
			<div class="bg" id="bg">
				<div class="item item1">
					<span class="name">王祖贤</span><br />
					<img src="img/1.jpg"/ class="pic1">
					<span class="profile">
						王祖贤（Joey Wong），1967年1月31日生于台湾省台北市，华语影视女演员、歌手。1984年，首次主演电影《今年的湖畔会很冷》，其后签约邵氏电影公司到香港发展。1987年出演电影《倩女幽魂》中“”聂小倩“一角获得香港电影金像奖最佳女主角提名。
					</span>
					
				</div>
				<div class="item item2">
					<span class="name">李若彤</span><br />
					<img src="img/2.jpg"/>
					<span class="profile">
						李若彤，中国香港影视演员。1990年任空姐时被星探发掘，受邀拍摄广告，客串首部电影《浪漫杀手自由人》。1995年首次主演电视剧，在《神雕侠侣》里饰演小龙女成名。1996年在电视剧《天龙八部》里分饰三角，1999年再次拍摄电视剧，此后以演电视剧为主。
					</span>
				</div>
				<div class="item item3">
					<span class="name">周慧敏</span><br />
					<img src="img/3.jpg"/ class="pic3">
					<span class="profile">
						周慧敏（Vivian Chow），1967年11月10日生于香港，中国香港女歌手、演员。1988年，加入TVB当劲歌金曲主持，演出首部电影《三人世界》。1991年，辞退电台工作，全线向歌唱和演戏发展。  1993年，以电视剧《大时代》获壹电视大奖最受欢迎艺人第三位。
					</span>
					
				</div>
			</div>
		</div>
	<script type="text/javascript">
		window.onload = function (){
			var oBg = document.getElementById('bg');
			var aDiv = oBg.getElementsByTagName('div');
			for(var i=0,l=aDiv.length; i<l; i++){
				aDiv[i].index = i;
				
				aDiv[i].onmouseover = function(ev){
					var now = this.index;
					var oE = ev || event;
					var oT = oE.target || oE.srcElement;
					var n = now-1;
					var b = now+1;
					function over (){
						if(n>=0){
							aDiv[n].style.opacity = 0.2;
							n--;
							over();
						}
						if(b<aDiv.length){
							aDiv[b].style.opacity = 0.2;
							b++;
							over();
						}
					}
					over();
				}
				aDiv[i].onmouseout = function (){
					for(var i=0,l=aDiv.length; i<l; i++){
						aDiv[i].style.opacity = 1;
					}
				}
			}
			
		}
	</script>
	</body>
</html>
